<template>
  <div id="bmsAside">
    <el-menu :default-active="index" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" style="border:0px" @select="handleSelect">
      <template v-if="!isCollapse">
        <img src="@/assets/image/logo-an.jpg">
      </template>
      <template v-if="isCollapse">
        <img src="@/assets/image/logo-merge.jpg" style="width:100%;height:54px;display:block">
      </template>
      <el-menu-item index="myHome" style="padding-left:20px !important">
        <i class="iconfont icon-shouye"></i>
        <span>首页</span>
      </el-menu-item>
      <el-submenu v-for="(item,index) in menus"
          :key="item.id"
          :index="(Number(index) + 2) + ''">
        <template slot="title">
          <i :class=item.meta.iconName></i>
          <span>{{item.meta.breadRumbs}}</span>
        </template>
        <el-menu-item v-for="children in item.children"
          :key="children.id"
          :index="children.name">
          <i :class=children.meta.iconName></i>
          <span>{{children.meta.breadRumbs.substring(children.meta.breadRumbs.lastIndexOf(",") + 1)}}</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'bmsAside',
  props:['shrink'],
  data() {
    return {
      isCollapse: false,
      index: '',
      menus: []
    };
  },
  methods: {
    handleOpen(key, keyPath) {
    },
    handleClose(key, keyPath) {
    },
    handleSelect(key, keyPath) {
      this.$router.push({name:key})
    },
    uniqueMenu() {
      this.menus = this.$store.state.app.menuTree
    }
  },
  mounted() {
    this.uniqueMenu()
  },
  watch: {
    shrink(newName, oldName) {
      this.isCollapse = !this.isCollapse
    },
    $route(to,from) {
      this.index = this.$router.history.current.name
    }
  },
  created() {
    this.index = this.$router.history.current.name
  },
    
}
</script>

<style scoped lang="scss">

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 208px;
  img {
    width: 208px;
    display: block;
  }
}

/* 主菜单 */
.el-submenu /deep/ .el-submenu__title {
  background-color: rgb(81, 90, 110);
  text-align: left;
}

/* 标题 */
span {
  color: white;
  font-size: 12px;
  margin-left: 6px;
}


/* 子菜单 */
.el-menu-item {
  color: white;
  padding-left: 44px !important;
  font-size: 12px;
  background-color: rgb(81, 90, 110);
}

.el-menu-item:hover {
  background-color: #2d8cf0 !important;
}

.el-menu-item.is-active {
  background-color: #2d8cf0 !important;
}


</style>
